<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

			.choose {
				width: 800px;
				height: 800px;
				margin: 100px auto;
			}
			table{
				width:300px ;
				height: 200px;
				border: 1px solid lightslategrey;				
			}
			tr,td{
				border: 1px solid lightslategrey;
			}

			#brief{
				text-align: center;
			}
			tbody tr:hover{
				background-color: ghostwhite;
			}
			.first {
				background-color: cornflowerblue;
				text-align:center;
				color: white;
			}
			
			.second {
				background-color: darkgray;
			}
		</style>
	</head>

	<body>
		<div class="choose">
			<table>
				<thead>
					<tr class="first">
						<td><input id="all" type="checkbox" onclick="selectAll()" /></td>
						<td>菜名</td>
						<td>饭店</td>
					</tr>
				</thead>
				<tbody id="brief">
					<tr class="second">
						<td><input type="checkbox" value="1" /></td>
						<td>地三鲜</td>
						<td>田老师</td>
					</tr>
					<tr class="second">
						<td><input type="checkbox" value="2" /></td>
						<td>西红柿</td>
						<td>田老师</td>
					</tr>
					<tr class="second">
						<td><input type="checkbox" value="3" /></td>
						<td>土豆丝</td>
						<td>田老师</td>
					</tr>
					<tr class="second">
						<td><input type="checkbox" value="4" /></td>
						<td>萝卜干</td>
						<td>田老师</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			function selectAll() {
				var all = document.getElementById("all");
				var brief = document.getElementById("brief");
				var tbodyArray = brief.getElementsByTagName("input");
				for(i = 0; i < tbodyArray.length; i++) {
					tbodyArray[i].checked = all.checked;
				}
			}
		</script>
	</body>

</html>